<template>
  <div class="mydoc">
    <el-input
        placeholder=""
        v-model="filterText"
        suffix-icon="el-icon-search"
        style="margin-bottom: 5px">
    </el-input>

    <el-tree
        class="filter-tree"
        :data="fileList"
        node-key="id"
        :props="defaultProps"
        :filter-node-method="filterNode"
        ref="file-tree"
        @node-click="handleNodeClick"
        :current-node-key="currentLivingId"
        highlight-current>
    </el-tree>
  </div>
</template>

<script>
import { getDocSelectTree } from "@/api/api";

export default {
  name: "docDirectory",
  watch: {
    filterText(val) {
      this.$refs["file-tree"].filter(val);
    },
    "$store.state.docManage.selectList" (){
      //在别处修改了选中的节点后，目录随之修改选中节点
      let idx = this.$store.state.docManage.selectList.length -1;
      if (idx >= 0){
        this.currentLivingId = this.$store.state.docManage.selectList[idx].id;
        this.$refs["file-tree"].setCurrentKey(this.currentLivingId);
      }
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(e) {
      this.breadscrumList = [];
      this.searchpath(e.id,this.fileList);
      this.$store.commit('docManage/changeselectList', this.breadscrumList);
    },
    //深度搜索递归查找目录选择的路径
    searchpath(key,list) {
      let res = false;
      for (let i = 0; i < list.length; i++){
        this.breadscrumList.push({id: list[i].id,
                                  name: list[i].label});
        res = key === list[i].id ? true : false;
        if (!res && list[i].children !== undefined){
          res = this.searchpath(key,list[i].children);
        }
        if (res === false){
          this.breadscrumList.pop();
        }
        //找到了直接返回
        else{
          return res;
        }
      }
      return res;
    },
    ini(){
      let that = this;
      this.$store.commit("docManage/changeselectList", []);
      getDocSelectTree().then(res => {
        that.fileList = res.data.result;
      }).catch(err => {
        console.log(err);
      });
    }
  },
  mounted() {
    this.ini();
  },
  data() {
    return {
      filterText: '',
      fileList : [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      breadscrumList : [],
      currentLivingId: 0,
    }
  }
}
</script>

<style>
.mydoc {
  background-color: #0C1329;
}

.mydoc .filter-tree{
  background-color: #0C1329;
  text-color: rgba(255,255,255,0.38);
  active-text-color: rgba(255,255,255,0.87);
}

.mydoc  .el-tree-node__content:hover,
.mydoc  .el-tree-node:focus>.el-tree-node__content,
.mydoc  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
  background: linear-gradient(to right, rgba(24, 124, 255, 0.05) 0%, rgba(24, 124, 255, 0.48) 98%);
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 20px;
}

.mydoc .el-input__icon{
  line-height: 30px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}

</style>